import React, {useEffect} from 'react';
import {Balloon, Field, Form, Grid, Icon, Input, NumberPicker, Select, Switch, Upload} from "@alifd/next";


const FormItem = Form.Item;
const {Row, Col} = Grid;
const {Option} = Select;
const {TextArea} = Input;

const Index = (props) => {
    const {itemData,onChangeData} = props;

    let field = Field.useField({
        onChange:()=>{
            onChangeData(field.getValues())
        }
    });

    const {init} = field;

    useEffect(()=>{
        field.setValues(itemData)
    },[itemData])

    return (
        <div style={{margin: "0 auto",maxHeight:"100%",overflow:"auto"}}>
            <div className={"bg__title"}>图层设置——{itemData.filedId}</div>
            <Form style={{width: "80%", margin: "20px auto auto auto"}}>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="variable"
                            label="变量"
                        >
                            <Switch {...init('variable', {valueName: "checked"})}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="variableName"
                            label="变量名"
                        >
                            <Input {...init('variableName', {initValue: itemData.filedId})}/>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem
                    name="content"
                    label="内容"
                    required
                >
                    <TextArea {...init('content')}/>
                </FormItem>
                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="location"
                            label="位置"
                            required
                        >
                            <Row gutter={16}>
                                <Col>
                                    <NumberPicker label="x:"{...init('positionX')}
                                                  style={{width: "100%"}}/>
                                </Col>
                                <Col>
                                    <NumberPicker label="y:"{...init('positionY')}
                                                  style={{width: "100%"}}/>
                                </Col>
                            </Row>
                        </FormItem>
                    </Col>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setCenter"
                                    label="居中绘制"
                                >
                                    <Switch autoWidth {...init('setCenter', {valueName: "checked"})}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="setRotate"
                                    label="旋转"
                                >
                                    <NumberPicker defaultValue="0" innerAfter="°" min="0" max="360"
                                                  hasTrigger={false} {...init('setRotate')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                        </Row>

                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setAlpha"
                                    label="透明度"
                                >
                                    <NumberPicker defaultValue="0" min="0" max="1"
                                                  step="0.001"  {...init('setAlpha')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="setColor"
                                    label="颜色"
                                >
                                    <Input
                                        htmlType={"color"} {...init('setColor')}/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                    <Col>
                        <FormItem
                            name="setFontFamily"
                            label="字体"
                        >
                            <Input disabled {...init('setFontFamily')}/>
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setBold"
                                    label="粗体"
                                >
                                    <Switch {...init('setBold', {valueName: "checked"})} />
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="setStrikeThrough"
                                    label="删除线"
                                >
                                    <Switch autoWidth {...init('setStrikeThrough', {
                                        valueName: "checked",
                                    })}/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setLineHeight"
                                    label="行高"
                                >
                                    <NumberPicker {...init('setLineHeight')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="setFontSize"
                                    label="字号"
                                    required
                                >
                                    <NumberPicker min="10" {...init('setFontSize')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                        </Row>

                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="setAutoBreakLine"
                                    label="自动换行"
                                >
                                    <Switch autoWidth {...init('setAutoBreakLine', {
                                        valueName: "checked",
                                    })}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="maxLineWidth"
                                    label="maxLineWidth"
                                >
                                    <NumberPicker disabled={!field.getValue("setAutoBreakLine")} {...init('setAutoBreakLine_maxLineWidth')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                    <Col>
                        <Row gutter={16}>
                            <Col>
                                <FormItem
                                    name="maxLineCount"
                                    label="maxLineCount"
                                >
                                    <NumberPicker disabled={!field.getValue("setAutoBreakLine")} {...init('setAutoBreakLine_maxLineCount')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                            <Col>
                                <FormItem
                                    name="lineHeight"
                                    label="lineHeight"
                                >
                                    <NumberPicker disabled={!field.getValue("setAutoBreakLine")} {...init('setAutoBreakLine_lineHeight')}
                                                  style={{width: "100%"}}/>
                                </FormItem>
                            </Col>
                        </Row>
                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setDirection"
                            label="绘制方向"
                            required
                        >
                            <Select
                                hasClear
                                id="direction"
                                style={{
                                    width: "100%"
                                }}
                                {...init('setDirection')}
                            >
                                <Option value="LeftRight">LeftRight</Option>
                                <Option value="RightLeft">RightLeft</Option>
                                <Option value="CenterLeftRight">CenterLeftRight</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col>

                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setRepeat"
                            label="平铺绘制"
                        >
                            <Switch autoWidth {...init('setRepeat')}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="repeatPaddingHorizontal"
                            label="repeatPaddingHorizontal"
                        >
                            <NumberPicker disabled={!field.getValue("setRepeat")} {...init('setRepeat_repeatPaddingHorizontal')}
                                          style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="repeatPaddingVertical"
                            label="repeatPaddingVertical"
                        >
                            <NumberPicker disabled={!field.getValue("setRepeat")} {...init('setRepeat_repeatPaddingVertical')}
                                          style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col>
                        <FormItem
                            name="setSpace"
                            label="字间距"
                        >
                            <NumberPicker step="0.001" {...init('setSpace')}
                                          style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="setAutoFitWidth"
                            label="自适应宽度"
                        >
                            <NumberPicker {...init('setAutoFitWidth')}
                                          style={{width: "100%"}}/>
                        </FormItem>
                    </Col>
                    <Col>
                        <FormItem
                            name="setBaseLine"
                            label="BaseLine"
                            required
                        >
                            <Select
                                id="baseLine"
                                style={{width: "100%"}}
                                {...init('setBaseLine')}
                            >
                                <Option value="Top">Top</Option>
                                <Option value="Base">Base</Option>
                                <Option value="Middle">Middle</Option>
                                <Option value="Bottom">Bottom</Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </div>
    );
};

export default Index;